Using HomeSite
Chapter 4  Learning HTML and CSS

Using Tables for Page Formatting

HTML tables allow for more interesting and precise page compositions. Tables are relatively complex compared to the other tags covered so far, so it's worth spending some time on tables in general before looking at the specific table design in the Archaeology Tours page.

HTML tables are built in the Table <TABLE></TABLE> tag. The table's basic structure is defined by table row <TR>...</TR> tags. Inside table rows are table cells, marked with table data <TD></TD> tags. You can also use table header tags <TH></TH>, which are identical to table data tags except that the text is bolded and centered horizontally in the data cell by default.

Spanning rows and columns

You can cause table data or table headers to span rows or columns by using the ROWSPAN and COLSPAN attributes, which produce effects similar to merging cells in a spreadsheet or word processor table.

Other table attributes

There are a number of other attributes that can be used within the <TABLE> tag. The following table lists the most important table attributes.

To build the Archaeology Tours table:

1. Place the cursor on a line below the Travel back in time! paragraph.
2. Click the Table Wizard button on the Tables QuickBar.

   

   The Table Wizard opens with the default table layout of two columns by two rows.

3. Click the top left cell of the table layout, then click the Row Span + button to make the cell span two rows.

   Color-coding shows the cell now fills the entire left column.

4. Click Next to open the Table Properties screen.
5. Set the Alignment to left, Cell Spacing to 0, Cell Padding to 3, and Border Size to 1.
6. Click Next to open the Cell Properties screen.
7. Click the top-right cell and choose center from the Horizontal drop-down list.
8. Click the bottom-right cell and set the Horizontal property to center.
9. Click Finish.

   The code should look like this:

   <TABLE CELLSPACING="0" CELLPADDING="3" BORDER="1">
   <TR>
       <TD ROWSPAN="2"></TD>
       <TD ALIGN="center"></TD>
   </TR>
   <TR>
       <TD ALIGN="center"></TD>
   </TR>
   </TABLE>
   

Notice how HomeSite indents the <TR> and <TD> blocks in the code above. This coding convention makes it easier to see the table structure. This hierarchical display of table elements is coded by nesting the row and cell tags within the table tag.

In the following procedures, you'll add text and formatting to the table cells.

Entering text in tables

Content for HTML tables is entered in the table cells using the table data <TD> and table header <TH> tags.

Table text is formatted in the same way as paragraph text, by coding the <FONT> tag.

To enter text in table cells:

1. Place the cursor between the <TD></TD> tags in the line that contains the ROWSPAN="2" attribute.
2. Insert a <P> tag, so that the line looks like this:

   <TD ROWSPAN="2"><P></P></TD>

3. Place the cursor after the <P> and select the File > Insert File menu command.
4. Select Insert Text 1.txt from the tutorial files folder and click Open.

   The text is inserted in the paragraph. The code now looks like this:

   <TD ROWSPAN="3"><P>Welcome to Archaeology Tours, the first choice of 
   travelers and adventurers. Our Mediterranean Cruise features 
   luxury accommodations, with stops in the following ancient 
   cities:</P></TD>
   

The rest of the content of this cell consists of a bulleted list, which we'll get to a bit later. First, let's format the cells in the right column, beginning in the top cell.

Using the table tag editors

After you create a table with the Table Wizard, you can refine the layout by editing the properties of its individual elements. To change these properties, use the <TR> and <TD> tag editors.

To format table cells:

1. Right-click inside the <TD> tag that follows the <TD> containing the Welcome text and select Edit Tag.

   The alignment value you set in the Table Wizard is displayed in the tag editor.

   

2. Click the HTML 4.0 tab, choose Yellow from the Background Color drop-down list, and click Apply.
3. Go to the next <TD> tag and repeat step 2 to set the background color of the bottom-right cell to Lime.

   The code for the entire table should look like this:

   <TABLE CELLSPACING="0" CELLPADDING="3" BORDER="1">
   <TR>
       <TD ROWSPAN="2"><P>Welcome to Archaeology Tours, the first choice of
       travelers and adventurers. Our Mediterranean Cruise features luxury
       accommodations, with stops in the following ancient cities:</P></TD>
       <TD ALIGN="center" BGCOLOR="Yellow"></TD>
   </TR>
   <TR>
       <TD ALIGN="center" BGCOLOR="Lime"></TD>
   </TR>
   </TABLE>
   

If those colored cells in the left column look a bit small, don't worry. We'll size them by putting text in them.

Adding Hyperlinks

Hyperlinks, or links, are the heart of the World Wide Web. They enable you to move from page to page and they provide the connections between Web pages and other resources.

Links are created with the Anchor <A></A> tag and always include the HREF attribute, which specifies the page to which you are linking. Links are usually identified on a page by special link text formatting, such as a distinct color or underlining. Many sites also use images that are as links.

Unlike the Allaire link you coded earlier, these next links are to documents in the file system and do not require the http://www prefix.

In this section, you will learn two ways to add hyperlinks.

To insert a hyperlink using the Anchor dialog box:

1. Place the cursor between the <TD></TD> tags for the top right cell (the cell with the Yellow background) and enter the text Purchase Cruise Tickets.
2. Select the Purchase Cruise Tickets text, then click the Anchor button on the Common toolbar.

   The selected text appears in the Description box.

3. In the HREF box, enter tickets.htm, then click OK to insert the link code.
4. Select Purchase Cruise Tickets again and click the Bold button.

   

   The table cell tag looks like this:

       <TD ALIGN="CENTER" BGCOLOR="Yellow">
           <A HREF="tickets.htm"><B>Purchase Cruise Tickets</B></A>
       </TD>
   

To insert a hyperlink using drag and drop:

1. Drag the map.htm file from the tutorial files folder and release the mouse button between the <TD></TD> tags for the bottom right cell (the cell with the Lime background).

   The link text is filled in for you from the contents of the map.htm <TITLE> tag.

2. Select Interactive Tour Map again and click the Bold button.

   The code looks like this:

       <TD ALIGN="CENTER" BGCOLOR="Lime">
           <A HREF="map.htm"><B>Purchase Cruise Tickets</B></A>
       </TD>
   

In the next section, you complete the table text by creating a list.

Copyright © 2000, Allaire Corporation. All rights reserved.